import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import { menuTree } from '@/apis/personal'
import Layout from '@/layout/Index.vue'

// 页面
const Login = () => import('@/views/login/Index.vue')
const PersonalIndex = () => import('@/views/personal/Index.vue')
const PersonalMessage = () => import('@/views/personal/Message.vue')
//404页
const NotFound = () => import('@/views/404.vue')

// 应用管理
const AppDept = () => import('@/views/app/Dept.vue')
const AppResource = () => import('@/views/app/Resource.vue')
const AppRole = () => import('@/views/app/Role.vue')
const AppUser = () => import('@/views/app/User.vue')

// 系统管理
const SysNotice = () => import('@/views/sys/Notice.vue')
const SysUser = () => import('@/views/sys/User.vue')

// 审计管理
const LogsOperation = () => import('@/views/logs/Operation.vue')
const LogsVisit = () => import('@/views/logs/Visit.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Layout,
    children: [
      {
        path: 'login',
        name: 'Login',
        component: Login
      },
      {
        path: 'personal',
        name: 'Personal',
        component: PersonalIndex,
        children: [
          {
            path: 'message',
            name: 'PersonalMessage',
            component: PersonalMessage
          }
        ]
      },
      // 应用管理的路由
      {
        path: '/app',
        name: 'App',
        children: [
          {
            path: 'user',
            name: 'AppUser',
            component: AppUser
          },
          {
            path: 'dept',
            name: 'AppDept',
            component: AppDept
          },
          {
            path: 'role',
            name: 'AppRole',
            component: AppRole
          },
          {
            path: 'resource',
            name: 'AppResource',
            component: AppResource
          }
        ]
      },
      // 系统管理的路由
      {
        path: '/sys',
        name: 'Sys',
        children: [
          {
            path: 'user',
            name: 'SysUser',
            component: SysUser
          },
          {
            path: 'notice',
            name: 'SysNotice',
            component: SysNotice
          }
        ]
      },
      // 审计管理的路由
      {
        path: '/logs',
        name: 'Logs',
        children: [
          {
            path: 'visit',
            name: 'LogsVisit',
            component: LogsVisit
          },
          {
            path: 'operation',
            name: 'LogsOperation',
            component: LogsOperation
          }
        ]
      },
      {
        path: '404',
        name: 'NotFound',
        component: NotFound
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: '404',
    redirect: '/404'
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

/**
 * 1. 如果是去登录页且已经登录，则直接跳转第一个导航
 * 2. 如果是首页，则直接跳转到第一个导航
 */

// 路由拦截守卫
router.beforeEach(async (to) => {
  // 判断是否登录
  const isLogin = store.getters['user/isLogin']
  // 如果是去登录页且已经登录，则直接跳转第一个导航
  if (to.path === '/login') {
    if (isLogin) {
      return store.state.firstRoute
    }
    return true
  }
  // 判断菜单是否加载
  if (store.state.routeLoaded) {
    return true
  }
  // 菜单的初始化
  await initMenu()
  // 获取菜单之后，跳转第一个路由
  const {
    state: { firstRoute }
  } = store
  // 如果是首页，则直接跳转到第一个导航
  if (to.path === '/' && firstRoute) {
    return firstRoute
  }
  return true
})

// 请求菜单
function initMenu() {
  return menuTree().then((res) => {
    const { data } = res
    // 菜单/路由已经加载
    store.commit('setRouteLoaded', true)
    // 菜单
    store.commit('setMenuTree', data)
    // 默认打开的第一个路由
    store.commit('setFirstRoute', data[0].children[0].path)
  })
}

export default router
